<template>
	<view class="container">
	<u-navbar title="购物车" :autoBack="true" placeholder="true"></u-navbar>
		<!-- 直接访问购物车的样子 -->
		<view v-if="false">
			<view class="total-wrapper">
				<text>购物车共{{ goodsTotal ? goodsTotal : 0 }}件商品</text>
				<button class="btn red" type="default" size="mini" @click="delVisible = !delVisible">{{ !delVisible ? '编辑商品' : '完成' }}</button>
			</view>
			<!-- 商品详情-->
			<view class="store-wrapper">
				<!-- 有商品的时候-->
				<template v-if="false">
					<view class="title">
						<image class="img" :src="imgBaseUrl + '/ache/images/position.png'" mode="aspectFit"></image>
						<text>店铺: 百疼痛管理店</text>
					</view>
					<view class="goods-wrapper">
						<u-checkbox-group @change="checkboxGroupChange">
							<u-checkbox
								@change="checkboxChange"
								label-disabled="false"
								v-model="item.checked"
								v-for="(item, index) in list"
								:key="index"
								:name="item.name"
								active-color="red"
								shape="circle"
							>
								<view class="goods-item">
									<view class="goods-info">
										<image class="img" :src="imgBaseUrl + '/ache/images/position.png'"></image>
										<view class="goods-details">
											<view class="goods-title">悄红颜紧致提拉精华液</view>
											<view class="goods-Spec">150g/瓶</view>
											<view class="goods-Price">
												<view class="Price">￥29.90</view>
												<view class="quantity"><u-number-box v-model="value" @change="valChange"></u-number-box></view>
											</view>
										</view>
									</view>
								</view>
							</u-checkbox>
						</u-checkbox-group>
						<u-checkbox-group>
							<view class="goods-bottom">
								<view class="center">
									<u-checkbox v-model="checkbox" @change="checkedAll" active-color="red" shape="circle"><text class="allText">全选</text></u-checkbox>
									<view class="goods-Allprice">
										合计：
										<text class="Price">￥29.90</text>
									</view>
									<u-button @click="onpayment" type="error" shape="circle" size="medium">去结算</u-button>
								</view>
							</view>
						</u-checkbox-group>
					</view>
				</template>
				<template>
					<view class="metadata">
						<image class="img" :src="imgBaseUrl + '/ache/images/cart.png'"></image>
						<view class="metadata-title">空空如也</view>
						<view class="writing">别忘了买点什么犒赏一下自己哦！</view>
						<u-button @click="ongoods" type="error" shape="circle" size="medium" >随便逛逛</u-button>
					</view>
				</template>
			</view>
		</view>
		<!-- 支付成功跳转的页面 -->
		<view class="success-item">
			<image class="img" :src="imgBaseUrl + '/ache/images/success.png'"></image>
			<view class="success-title">提交成功</view>
			<view class="success-price">订单金额 ￥74.80</view>
			<view class="success-button">
				<view class="comeback" @click="comeback">返回首页</view>
				<view class="godetail" @click="godetail">查看订单</view>
			</view>
			<view class="success-text">稍后会有工作人员联系您，请您耐心等候！</view>
		</view>

		<view class="title"><text class="text">为您推荐</text></view>
		<goods></goods>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import goods from '@/components/goods/index.vue';
export default {
	data() {
		return {
			delVisible: false, //删除按钮的状态
			background: {
				backgroundColor: '#f53942'
			},
			checkbox: false,
			value: 0,
			list: [
				{
					name: 'apple',
					checked: false,
					disabled: false
				},
				{
					name: 'banner',
					checked: false,
					disabled: false
				},
				{
					name: 'orange',
					checked: false,
					disabled: false
				}
			]
		};
	},
	computed: {
		...mapGetters(['imgBaseUrl'])
	},
	components: {
		goods
	},
	methods: {
		//计数器
		valChange(e) {
			console.log('当前值为: ' + e.value);
		},
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			//console.log(e);
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			// console.log(e);
		},
		// 全选
		checkedAll() {
			this.checkbox = !this.checkbox;
			if (this.checkbox) {
				this.list.map(val => {
					val.checked = true;
				});
			} else {
				this.list.map(val => {
					val.checked = false;
				});
			}
		},
		//去结算
		onpayment() {
			console.log('去结算');
		},
		//去商品列表
		ongoods() {
			uni.navigateTo({
				url:"/pages/goods-list/index"
			})
			console.log('点击了去商品列表');
		},
		//跳转首页
		comeback(){
			uni.switchTab({
				url: '/pages/index/index'
			});
			console.log('点击了去商品列表');
		},
		//查看订单
		godetail(){
			uni.navigateTo({
				url:"/pages/order-detail/index"
			})
			console.log('查看订单');
		}
		
	}
};
</script>
<style lang="scss">
@import '@/styles/mixin.scss';

.container {
	min-height: 100%;
	background-color: #f5f5f5;

	.total-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		.btn {
			border-radius: 60rpx;
			@include border-1px(#666666, 60rpx);
		}
	}
	.store-wrapper {
		margin: 24rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		.title {
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			padding: 20rpx;
			font-weight: bold;
			@include border-bottom-1px(#ececec);

			.img {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				background-color: #f5f5f5;
			}
		}
		.goods-wrapper {
			.goods-item {
				width: 676rpx;
				height: 216rpx;
				overflow: hidden;
				.goods-info {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					.img {
						display: flex;
						height: 175rpx;
						width: 150rpx;
					}
					.goods-details {
						width: 676rpx;
						.goods-title {
							font-size: 26rpx;
							font-weight: 400;
							color: #222222;
						}
						.goods-Spec {
							display: inline-block;
							font-size: 20rpx;
							color: #888888;
							background-color: #f6f6f6;
							border-radius: 5rpx;
						}
						.goods-Price {
							width: 100%;
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							justify-content: space-between;
						}
						.Price {
							color: #f53942;
							font-size: 30rpx;
							font-weight: bold;
						}
						.quantity {
							padding-right: 24rpx;
						}
					}
				}
			}
			.goods-bottom {
				border-top: 1rpx solid #ececec;
				text-align: center;
				height: 97rpx;
				.center {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;
					margin: 20rpx;
					.allText {
						color: #888888;
						font-size: 28rpx;
						font-weight: 400;
					}
					.goods-Allprice {
						display: flex;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
						align-items: baseline;
						.Price {
							font-size: 42rpx;
							color: #f53942;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
	.metadata {
		margin: 24rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		height: 975rpx;
		text-align: center;
		.img {
			padding-top: 150rpx;
			width: 341rpx;
			height: 341rpx;
		}
		.metadata-title {
			font-size: 26rpx;
			font-weight: 400;
			color: #222222;
			padding: 20rpx;
		}
		.writing {
			padding-bottom: 80rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #888888;
		}
	}
	.title {
		margin: 20rpx;
		font-weight: bold;
		text-align: center;
		.text {
			font-size: 30rpx;
		}
	}
	.success-item {
		padding: 30rpx;
		text-align: center;
		margin: 40rpx;
		background: #ffffff;
		border-radius: 20rpx;
		.img {
			padding: 20rpx;
			width: 57rpx;
			height: 57rpx;
		}
		.success-title {
			padding: 20rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #222222;
		}
		.success-price {
			padding: 20rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #888888;
		}
		.success-button {
			padding: 20rpx;
			display: flex;
			justify-content: space-evenly;
			.comeback {
				width:186rpx ;
				height: 61rpx;
				padding: 13rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #ffffff;
				background: #f53942;
				border: 1rpx solid #f53942;
				border-radius: 30rpx;
			}
			.godetail {
				padding: 13rpx;
				width:186rpx ;
				height: 61rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #f53942;
				background: #ffffff;
				border: 1rpx solid #f53942;
				border-radius: 30rpx;
			}
		}
		.success-text {
			padding: 20rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #888888;
		}
	}
}
</style>
